<!--
 * @Author: your name
 * @Date: 2021-09-12 16:05:49
 * @LastEditTime: 2021-09-20 11:38:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \more-money\src\components\money\TagList.vue
-->
<template>
    <div class="tag-container">
        <ul class="tag-content flex flex-wrap">
            <li class="tag-item flex flex-column" v-for="(item,index) in list" :key="index" 
            :class="{selected:selected===item.value}" @click="selectItem(item.value)">
                <Icon :iconName="item.value" />
                <span class="fs-12">{{item.name}}</span>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
import TagsListModel from '@/models/TagsListModel';

@Component
export default class TagList extends Vue{
    @Prop() list!: Array<Tag>;
    @Watch('list')
    private clearSelect() {
        this.selected = '';
    }
    private selected = '';
    private selectItem(value: string){
        if(value === 'add'){
            const newTagName = window.prompt('请输入新标签');
            if(newTagName){
                const add = this.list.pop();
                const newTagList = [...this.list,{name:newTagName,value:'default'}];
                TagsListModel.updateList(newTagList)
                this.$emit('update:list',[...newTagList,add]);
            }else{
                window.alert('标签名不可为空');
                return;
            }
        }else{
            this.selected = this.selected === value ? '' : value;
            this.$emit('change',this.selected);
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/config.scss';

.tag-container{
    width: 100%;
    padding: 8px 16px;
    .tag-content{
        .tag-item{
            $height:calc(100% / 4);
            width:$height;
            height:$height;
            padding: 4px 8px;
            ::v-deep .icon{
                font-size: 2.4rem;
                border-radius: 50%;
                background-color: $color-bg;
            }

        &.selected {
            ::v-deep .icon{
                background-color: $color-primary;
            }
            }
        }
    }
}
</style>